<template>
    <div class="my-home-div">
        <div class="my-home-div-line row">
            <div class="col">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon_wealth" />
                </svg>
                {{ getuser?.ID === user?.ID ? '我的' : '' }}积分
                <a href="https://oj.hterobot.com/#/article/100039" target="_blank" class="circle">?
                </a>
            </div>
            <div class="col text-right">
                <!-- <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon_gift" />
                </svg> -->
                <!-- <RouterLink :to="{ name: '积分兑换' }" v-slot="{ href }" custom>
                    <el-link type="primary" :href="href">
                        兑换商城
                    </el-link>
                </RouterLink> -->
            </div>
        </div>
        <div class="m-p-3 row m-0">
            <div class="col-6 p-0">
                <div class="user_jifen cu" @click="router.push(`/integral?userid=${getuser?.ID}&type=比赛`)">
                    <div class="user_jifen_div">
                        <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/icon_bisaijifen.png"
                            width="48" alt="">
                    </div>
                    <div>
                        <h3>
                            <MynumberVue :num="Number(integral.find(e => e.type === '比赛')?.nums || 0)"></MynumberVue>
                        </h3>
                        <div>比赛积分</div>
                    </div>
                </div>
            </div>
            <div class="col-6 p-0">
                <div class="user_jifen cu" @click="router.push(`/integral?userid=${getuser?.ID}&type=贡献`)">
                    <div class="user_jifen_div">
                        <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/icon_gonxianjifen.png"
                            width="48" alt="">
                    </div>
                    <div>
                        <h3>
                            <MynumberVue :num="integral.filter(e => e.type?.includes('贡献'))?.map(f => f.nums).reduce((a = 0, b = 0) => Number(a) + Number(b),
                                0)"></MynumberVue>
                        </h3>
                        <div>贡献积分</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="m-p-3 row m-0 pt-0">
            <div class="col-6 p-0">
                <div class="user_jifen cu" @click="router.push(`/integral?userid=${getuser?.ID}&type=练习`)">
                    <div class="user_jifen_div">
                        <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/icon_lianxijifen.png"
                            width="48" alt="">
                    </div>
                    <div>
                        <h3>
                            <MynumberVue :num="Number(integral.find(e => e.type === '练习')?.nums || 0)"></MynumberVue>
                        </h3>
                        <div>练习积分 </div>
                    </div>
                </div>
            </div>
            <div class="col-6 p-0 pt-0">
                <div class="user_jifen cu" @click="router.push(`/integral?userid=${getuser?.ID}&type=金币`)">
                    <div class="user_jifen_div">
                        <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/icon_jinbi.png" width="48"
                            alt="">
                    </div>
                    <div>
                        <h3>
                            <MynumberVue :num="Number(integral.find(e => e.type === '金币')?.nums || 0)"></MynumberVue>
                        </h3>
                        <div>金币</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { asyncgetintegral } from '../../../api';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import MynumberVue from "../../../components/animejs/mynumber.vue"
import { Storekey } from '../../../interface';
import { useStore } from 'vuex';

const p = defineProps<{ getuser?: Studycodemodel.Iuser }>()
const integral = ref<{ nums: number, type: Studycodemodel.Iintegral['type'] }[]>([])
const store = useStore(Storekey)
const user = computed(() => {
    return store.state.user
})
const router = useRouter();

onMounted(() => {
    getintegral()
})

watch(() => p.getuser, () => {
    getintegral()
})

async function getintegral() {
    if (p.getuser?.ID) {
        integral.value = await asyncgetintegral({ userid: p.getuser.ID })
    }
}
</script>

<style scoped>
.circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 16px;
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    width: 16px;
    font-size: 12px;
    font-weight: 400;
    transform: translateY(-1px);
}








.user_jifen {
    background: linear-gradient(0deg, rgba(245, 245, 245, 0.5), rgba(245, 245, 245, 0.5)), #FFFFFF;
    /* Layer_line */
    border: 1px solid rgba(0, 0, 0, 0.06);
    /* Depth 4 */
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.05), 0px 1.6px 3.6px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    height: 75px;
    display: flex;
    align-items: center;
    padding: 12px;
    transition: all 0.3s;
}

.user_jifen:hover {
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
}

.user_jifen_div {
    margin-right: 12px;
}

.user_jifen h3 {
    margin-bottom: 0px;
    font-weight: 700;
    font-size: 24px;
}



.col-6+.col-6 .chartVue {
    margin-left: 12px;
}

.col-6+.col-6 .user_jifen {
    margin-left: 12px;
}
</style>